<script setup lang="ts">
import { jump, statusBarHeightFn } from "@/utils/util";
import SearchRecord from "../components/search-record.vue";
import Waterfall from "../../components/waterfall/index.vue";
import { prodPage, prodCollect, searchProdByImgApi } from "@/api/home";
import { ShopType, ParamsType } from "@/types/pages/home";
import searchCom from "../components/search.vue";
const statusBarHeight = ref<string>("");
import { getToken } from "@/utils/auth";
import cache from "@/utils/cache";
import { PageProps } from "@/hooks/usePage";
onMounted(() => {
  statusBarHeight.value = statusBarHeightFn();
});

const isSearch = ref<boolean>(false);

// 清空瀑布流
const waterResetLoad = () => {
  WaterfallRef.value && WaterfallRef.value.resetLoadmore();
};
const SearchRecordRef = ref<any>(null);
const searchFn = (val) => {
  page.params.isRecommend = "";

  isSearch.value = true;
  resetData();
};
const WaterfallRef = ref();

const page = reactive<PageProps>({
  params: {
    isRecommend: true,
    search: "",
  },
  fetchData: prodPage,
  beforeLoadingFn: waterResetLoad,
});

const meScrollPageRef = ref();
const resetData = () => {
  meScrollPageRef.value && meScrollPageRef.value.resetData();
};
const itemClick = (val: ShopType) => {
  jump(`/pages/commodity/detail?id=${val.id}`);
};
const enshrine = async (val: ShopType) => {
  console.log(val);
  const { code, msg, data } = await prodCollect(val.id);
  if (code == 0) {
    val.collectFlag = !val.collectFlag;
  } else {
    uni.$u.toast(msg);
  }
};
const state = ref<number>(1);

const Cancel = () => {
  if (page.params.search) {
    page.params.search = "";
    isSearch.value = false;
    page.params.isRecommend = true;
    resetData();
    return;
  }

  uni.navigateBack();
};
const change = (text: string) => {
  page.params.search = text;

  state.value = 2;
  isSearch.value = true;
  page.params.isRecommend = "";
  resetData();
};
const searchInput = (val: string) => {
  if (val == "") {
    page.params.isRecommend = true;
    isSearch.value = false;

    resetData();
  }
};

// 获取完后调用
const onGetListEd = async () => {
  SearchRecordRef.value && SearchRecordRef.value.userHistorySearchRecentFn();
};

const confirm = (val: string) => {
  console.log("val", val);
};
const back = () => {
  uni.navigateBack();
};

const cameraFn = async () => {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      isSearch.value = true;

      const imgFile = res.tempFilePaths;

      uni.showLoading({});

      // page.fetchData = searchProdByImgApi
      // page.isPage = false
      // page.params.file = imgFile[0]
      // await resetData()
      // uni.hideLoading()

      const url =
        import.meta.env.VITE_APP_BASE_URL + "/admin/m/prod/search/image/pic";
      uni.uploadFile({
        url: url,
        filePath: imgFile[0],
        name: "file",
        header: {
          Authorization: `Bearer ${getToken()}`,
          "CLIENT-TOC": "Y",
          "TENANT-ID": cache.getTenant() || "",
        },
        success(res: any) {
          uni.hideLoading();
          const { code, data } = JSON.parse(res.data);
          if (code == 0) {
            waterResetLoad();
            page.data = data;
            // console.log("data",data)
          }
        },
        fail(error) {
          uni.hideLoading();
          console.log(error);
        },
      });
    },
  });
};
</script>

<template>
  <view>
    <wxTopStatus :coustom="true" backgroundColor="#fff">
      <view class="flex-row-center px-[30rpx] gap-[20rpx]">
        <view @click="back"> 取消 </view>
        <view class="flex-1">
          <searchCom
            v-model="page.params.search"
            @confirm="searchFn"
            :showBtn="false"
            @camera="cameraFn"
          ></searchCom>
        </view>
      </view>
    </wxTopStatus>

    <!-- <scroll-view class="list" scroll-y="true" @scrolltolower="lower"> -->
    <SearchRecord
      ref="SearchRecordRef"
      @change="change"
      v-if="!isSearch"
    ></SearchRecord>
    <view class="Recommended">
      <view class="recom-name" v-if="!isSearch">{{ "推荐产品" }}</view>
      <MeScrollPage
        ref="meScrollPageRef"
        :page="page"
        @onGetListLafer="onGetListEd"
      >
        <Waterfall
          ref="WaterfallRef"
          :data="page.data"
          @click="itemClick"
          @enshrine="enshrine"
        ></Waterfall>
      </MeScrollPage>
      <!-- <fui-loadmore
        :initText="t('common.pullUpLoading')"
        :text="t('common.loading')"
        :noneText="t('common.noMoreData')"
        :state="state"
        activeColor="$subject-color"
      ></fui-loadmore> -->
    </view>

    <!-- </scroll-view> --></view
  >
</template>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 0 20px 20px;
  border-bottom: 1px solid #eeeeee;

  .left {
    border: 1px solid $vice-subject-color;
    padding: 0 15px;
    display: flex;
    flex: 1 0 0;
    align-items: center;
    border-radius: 10px;
  }

  .Cancel {
    margin-left: 20px;
    text-align: center;

    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0px;

    /* Primary */
    color: #242424;
  }
}

//.list {
//    height: calc(100vh - 75px - 40px);
//}

.Recommended {
  .recom-name {
    padding: 10px 10px;
    font-size: 15px;
    font-weight: normal;
    line-height: 15px;
    text-align: justify;
    /* 浏览器可能不支持 */
    letter-spacing: 0px;

    font-feature-settings: "kern" on;
    /* 主题色 */
    color: #303030;
  }

  .list {
    margin-top: 15px;
  }
}
</style>
